<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            实时数据
            <ExclamationCircleOutlined />
          </div>
          <div class="titleLeft">
            <a-button
              class="search_Button confirm"
              :icon="h(SyncOutlined)"
              type="primary"
              @click="refreshData"
              >刷新数据</a-button
            >
          </div>
        </header>
        <a-row :gutter="16" class="marginTop12">
          <LeTodoList :todoItems="todoItems" @sendData="updateData" />
        </a-row>
      </template>
    </a-card>
    <a-card size="small" :bordered="false" class="box-card marginTop12">
      <!-- <template #title>
        <header class="titleHeader">
          <div class="titleLeft">数据明细
            <ExclamationCircleOutlined />
          </div>
        </header>
      </template> -->
      <div class="seach-content">
        <a-row>
          <a-col :xs="4" :xl="2" class="search_content">
            <div style="font-weight: bold; font-size: 16px" class="titleLeft">
              数据明细
              <!-- <ExclamationCircleOutlined /> -->
            </div>
          </a-col>
          <!-- <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">游戏ID</div>
            <a-input size="small" v-model:value="id" allowClear placeholder="请输入游戏ID" class="search_input"/>
          </a-col> -->
          <!-- <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">游戏名称</div>
            <a-input size="small" v-model:value="name" allowClear type="text" placeholder="请输入游戏名称" class="search_input"/>
          </a-col> -->
          <a-col :xs="17" :xl="18" class="search_content">
            <!-- <div class="search_lable">日期选择</div> -->
            <!-- <a-time-range-picker class="search_input" allowClear>
            </a-time-range-picker> -->
            <a-date-picker
              v-if="data_status === '2'"
              v-model:value="packName"
              v-model:picker="date"
            />
            <!-- <a-date-picker v-else-if="data_status==='3'" v-model:value="packName" picker="week" :locale="locale"/> -->
            <a-range-picker
              v-else-if="data_status === '3'"
              v-model:value="packName"
              picker="week"
            />
            <a-range-picker
              v-else-if="data_status === '4'"
              v-model:value="packName"
              picker="month"
            />
            <a-range-picker
              v-else-if="data_status === '1'"
              v-model:value="packName"
              :presets="rangePresets"
              @change="onRangeChange"
              format="YYYY/MM/DD HH:mm:ss"
            />
            <a-range-picker v-else v-model:value="packName" />
            <span class="search_lable1" @click="onData_picker('1')"
              >自定义</span
            >
            <span class="search_lable1" @click="onData_picker('2')">按日</span>
            <span class="search_lable1" @click="onData_picker('3')">按周</span>
            <span class="search_lable1" @click="onData_picker('4')">按月</span>
          </a-col>
          <a-col :xs="3" :xl="4" class="search_content">
            <a-button
              class="search_Button confirm"
              type="primary"
              @click="search"
              >查询</a-button
            >
            <a-button
              class="search_Button search_Button_reset button_cancel_hover"
              @click="reset"
              >重置</a-button
            >
          </a-col>
        </a-row>
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :data-source="data"
          @resizeColumn="handleResizeColumn"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          :locale="localeObj"
        >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'name1'">
              <span>
                <smile-outlined />
                Name
              </span>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <!-- <template v-if="column.key === 'name'">
              <a>
                {{ record.name }}
              </a>
            </template> -->
            <div v-if="column.key === 'status'" class="geme_status">
              <span v-if="record.status === 1" class="geme_status_gray"
                >待上线</span
              >
              <span v-else-if="record.status === 3" class="geme_status_color"
                >已上线</span
              >
              <span v-else-if="record.status === 4" class="geme_status_out"
                >已下架</span
              >
              <span v-else-if="record.status === 2">-</span>
            </div>
            <div v-if="column.key === 'onlineTime'">
              <span v-if="record.onlineTime">{{ record.onlineTime }}</span>
              <span v-else>-</span>
            </div>
            <template v-if="column.key === 'tags'">
              <a-tag
                v-if="record.status === 1"
                :bordered="false"
                color="default"
                >未发布</a-tag
              >
              <a-tag
                v-else-if="record.status === 3"
                :bordered="false"
                color="green"
                >审核完成</a-tag
              >
              <a-tag
                v-else-if="record.status === 4"
                :bordered="false"
                color="error"
                >审核失败</a-tag
              >
              <a-tag
                v-else-if="record.status === 2"
                :bordered="false"
                color="warning"
                >审核中</a-tag
              >
            </template>
            <!-- <template v-else-if="column.key === 'action'">
              <span class="action">
                <a-button class="action" size="small" type="text" @click="doAction('views',record)">查看</a-button>
                <a-button class="action" size="small" type="text" @click="doAction('applyForRemoval',record)">申请下架</a-button>
              </span>
            </template> -->
          </template>
          <!-- <a-config-provider >
            <template #emptyText>
              <div style="text-align: center">
                <img src="../../assets/images/img-default @2x.png" alt="">
                <p>暂无数据</p>
              </div>
            </template>
          </a-config-provider> -->
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw, h, onMounted } from "vue";
// import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import LeTodoList from "./tolist.vue";
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  ExportOutlined,
  SyncOutlined,
} from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, Empty } from "ant-design-vue";
import SvgIcon from "@/components/svgIcon.vue";
import * as dayjs from "dayjs";
// import weekday from "dayjs/plugin/weekday"
// import localeData from "dayjs/plugin/localeData"
// dayjs.extend(weekday)
// dayjs.extend(localeData)

const expand = ref(false);
// const localeObj =ref('')
// const localeObj= {
//   emptyText: h(Empty, {
//     description: '请您修改订阅信息，来精准匹配您的项目',
//     // image: Empty.PRESENTED_IMAGE_SIMPLE,
//     imageStyle: { height: '60px' },
//   }),
// }
const localeObj = {
  emptyText: h(Empty, {
    description: "暂无数据",
    image: "@/assets/images/img-default .png",
    imageStyle: { height: "60px" },
  }),
};
// todoList
const refreshData = () => {
  // 模拟数据刷新
  console.log("数据已刷新");
  // 这里可以添加实际的数据刷新逻辑
};
const receivedData = ref("");
const updateData = (data) => {
  console.log(11, "传参");
  console.log("data: ", data);
  receivedData.value = data;
  console.log("receivedData.value: ", receivedData.value);
};

const todoItems = ref([
  {
    title: "584",
    total: "总量: 1.89万",
    newUsers: "新增用户(人)",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        // boundaryGap: false,
        data: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
          "Thu1",
          "Fri1",
          "Sat1",
          "Sun1",
          "Sun2",
        ],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 55, 400],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "151",
    total: "总量: 1.89万",
    newUsers: "新增次留(人)",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "80128",
    total: "总量: 13.89万",
    newUsers: "活跃量(人)",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 120],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "68128",
    total: "总量: 11.89万",
    newUsers: "下载量(次)",
    dailyIncrease: "50%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 55],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
]);
// search
const packName = ref("");

const search = () => {
  console.log(packName.value, 11111);
};
const reset = () => {
  packName.value = "";
};
const handleChange = (value) => {
  console.log(`selected ${value}`);
  search();
};
// 表格
// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//     status:1
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//     status:2,
//     onlineTime:'2023/07/10 08:00:00'
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:3
//   },
//   {
//     key: '4',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:4
//   },
//   {
//     key: '4',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:4
//   },
// ];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    status: 1,
  });
}
const columns = ref([
  {
    title: "序号",
    dataIndex: "key",
    render: (value, record, index) => {
      return index + 1; // 使用行号
    },
    width: 80,
  },
  {
    title: "统计时间",
    dataIndex: "name",
    key: "name",
    resizable: true,
    width: 150,
    align: "center",
  },
  {
    title: "新增用户",
    dataIndex: "age",
    key: "age",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "新增次留",
    dataIndex: "address",
    key: "address",
    align: "center",
  },
  {
    title: "活跃量",
    key: "tags",
    dataIndex: "tags",
    align: "center",
  },
  {
    title: "下载量",
    key: "onlineTime",
    dataIndex: "onlineTime",
    align: "center",
    width: 180,
  },
  // {
  //   title: '游戏状态',
  //   key: 'status',
  //   dataIndex: 'status',
  //   align:'center',
  //   width: 100,
  // },
  // {
  //   title: 'Action',
  //   key: 'action',
  //   align:'center'
  // },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const state = reactive({
  // selectedRowKeys: [],
  // Check here to configure the default column
  loading: false,
});
// const applyForRemovalModal = ref(false);
// const handleOk = ()=>{
//   formRef.value
//     .validate()
//     .then(() => {
//       console.log('values', formState, toRaw(formState)
//     );
//       applyForRemovalModal.value = false
//       // formRef.value.resetFields();
//       // formState.screenshot =[]
//     })
//     .catch(error => {
//       console.log('error', error);
//     });
//   console.log(111,'addM');
// }
// const handleCancel =()=>{
//   applyForRemovalModal.value = false
//   formRef.value.resetFields();
// }
const doAction = (e, record) => {
  if (e === "applyForRemoval") {
    console.log(1111, "applyForRemoval");
    applyForRemovalModal.value = true;
    // formRef.value.resetFields();
    // formState.screenshot =[]
  } else if (e === "delete") {
    Modal.confirm({
      title: "Are you sure delete this task?",
      icon: createVNode(ExclamationCircleOutlined),
      content: `Some descriptions + ${record.name}`,
      okText: "Yes",
      okType: "danger",
      cancelText: "No",
      onOk() {
        console.log("OK", record);
        formRef.value
          .validate()
          .then(() => {
            console.log("values", formState, toRaw(formState));
            applyForRemovalModal.value = false;
          })
          .catch((error) => {
            console.log("error", error);
          });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  } else if (e === "views") {
    console.log(record, "record");
  }
};
const onRangeChange = (dates, dateStrings) => {
  console.log("dateStrings: ", dateStrings);
  console.log("dates: ", dates);
  if (dates) {
    console.log("From: ", dates[0], ", to: ", dates[1]);
    console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
  } else {
    console.log("Clear");
  }
};
const rangePresets = ref([
  {
    label: "Last 7 Days",
    value: [dayjs().add(-7, "d"), dayjs()],
  },
  {
    label: "Last 14 Days",
    value: [dayjs().add(-14, "d"), dayjs()],
  },
  {
    label: "Last 30 Days",
    value: [dayjs().add(-30, "d"), dayjs()],
  },
  {
    label: "Last 90 Days",
    value: [dayjs().add(-90, "d"), dayjs()],
  },
]);
const data_status = ref("");
const onData_picker = (item) => {
  packName.value = "";
  data_status.value = item;
};
// 分页
</script>
<style lang="less" scoped>
@import url("./dataBoard.less");
</style>
<style scoped>
.title {
  text-align: center;
}
.margin20 {
  margin-top: 20px;
}
.dataOverview {
  height: 15px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bolder;
  font-size: 10px;
  color: #3c3c3c;
  line-height: 15px;
  margin-left: 20px;
}
.a_col_date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
